<template>
    <div>
        <el-form :model="form" ref="guarantorsForm" label-width="80px" label-position="top">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="个人担保" name="1">
                    <el-table
                        :data="form.personalGuarantors"
                        :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                        <el-table-column
                            align="center"
                            prop="name"
                            label="姓名"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="name" :rules="{
                                     required: true,
                                     message: '请输入姓名',
                                     trigger: 'blur',
                                     validator: (rule, value, callback) => validData(rule, row.name, callback)
                                   }">
                                    <el-input v-model="row.name" placeholder="担保人姓名" maxlength="10" clearable/>
                                </el-form-item>

                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="idNumber"
                            label="身份证号"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="idNumber" :rules="{
                                 required: true,
                                 message: '请输入身份证号',
                                 trigger: 'blur',
                                 validator: (rule, value, callback) => validData(rule, row.idNumber, callback)
                               }">
                                    <el-input v-model="row.idNumber" placeholder="请输入身份证号" maxlength="18" clearable/>
                                </el-form-item>

                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="contactPhoneNumber"
                            label="联系电话"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="contactPhoneNumber" :rules="{
                                 required: true,
                                 message: '请输入联系电话',
                                 trigger: 'blur',
                                 validator: (rule, value, callback) => validData(rule, row.contactPhoneNumber, callback)
                               }">
                                    <el-input v-model="row.contactPhoneNumber" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11" placeholder="请输入联系电话" clearable/>
                                </el-form-item>

                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="contactAddress"
                            label="联系地址"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="contactAddress" :rules="{
                                 required: true,
                                 message: '请输入联系地址',
                                 trigger: 'blur',
                                 validator: (rule, value, callback) => validData(rule, row.contactAddress, callback)
                               }">
                                    <el-input v-model="row.contactAddress" placeholder="请输入联系地址" maxlength="30" clearable/>
                                </el-form-item>

                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="relationshipWithCustomers"
                            label="与客户关系"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="relationshipWithCustomers" :rules="{
                                 required: true,
                                 message: '请输入与客户关系',
                                 trigger: 'blur',
                                 validator: (rule, value, callback) => validData(rule, row.relationshipWithCustomers, callback)
                               }">
                                    <el-input v-model="row.relationshipWithCustomers" placeholder="请输入与客户关系" maxlength="10" clearable/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="fieldDict"
                            label="操作"
                            fixed="right"
                            min-width="100">
                            <template v-slot="{$index}">
                                <el-button type="danger" icon="el-icon-delete" circle @click="deletePersonal($index)"></el-button>
                            </template>
                        </el-table-column>
                        <template v-slot:append>
                            <div class="flex-xy-center" style="height: 30px">
                                <el-button type="text" icon="el-icon-plus" @click="addPersonal">添加担保人</el-button>
                            </div>
                        </template>
                    </el-table>

                </el-tab-pane>
                <el-tab-pane label="企业担保" name="2">
                    <el-table
                        :data="form.companyGuarantors"
                        :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                        <el-table-column
                            align="center"
                            prop="name"
                            label="企业名称"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="name" :rules="{
                                     required: true,
                                     message: '请输入企业名称',
                                     trigger: 'blur',
                                     validator: (rule, value, callback) => validData(rule, row.name, callback)
                                   }">
                                    <el-input v-model="row.name" placeholder="请输入企业名称" maxlength="10" clearable/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="idNumber"
                            label="统一社会信用代码"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="name" :rules="{
                                 required: true,
                                 message: '请输入统一社会信用代码',
                                 trigger: 'blur',
                                 validator: (rule, value, callback) => validData(rule, row.idNumber, callback)
                               }">
                                    <el-input v-model="row.idNumber" placeholder="统一社会信用代码" maxlength="18" clearable/>
                                </el-form-item>

                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="contactAddress"
                            label="联系地址"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="contactAddress" :rules="{
                                 required: true,
                                 message: '请输入联系地址',
                                 trigger: 'blur',
                                 validator: (rule, value, callback) => validData(rule, row.contactAddress, callback)
                               }">
                                    <el-input v-model="row.contactAddress" placeholder="请输入联系地址" maxlength="30" clearable/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="contacts"
                            label="联系人"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="contacts" :rules="{
                                         required: true,
                                         message: '请输入联系人姓名',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, row.contacts, callback)
                                       }">
                                    <el-input v-model="row.contacts" placeholder="请输入联系人姓名" maxlength="10" clearable/>
                                </el-form-item>

                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="contactPhoneNumber"
                            label="联系电话"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="contactPhoneNumber" :rules="{
                                 required: true,
                                 message: '请输入联系电话',
                                 trigger: 'blur',
                                 validator: (rule, value, callback) => validData(rule, row.contactPhoneNumber, callback)
                               }">
                                    <el-input v-model="row.contactPhoneNumber" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11" placeholder="请输入联系电话" clearable/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="relationshipWithCustomers"
                            label="与客户关系"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="relationshipWithCustomers" :rules="{
                                 required: true,
                                 message: '请输入与客户关系',
                                 trigger: 'blur',
                                 validator: (rule, value, callback) => validData(rule, row.relationshipWithCustomers, callback)
                               }">
                                    <el-input v-model="row.relationshipWithCustomers" placeholder="请输入与客户关系" maxlength="10" clearable/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="email"
                            label="电子邮箱"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="email">
                                    <el-input v-model="row.email" placeholder="请输入电子邮箱" maxlength="30" clearable/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="fax"
                            label="传真"
                            min-width="180">
                            <template v-slot="{row}">
                                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="fax">
                                    <el-input v-model="row.fax" placeholder="请输入传真" maxlength="30" clearable/>
                                </el-form-item>
                            </template>
                        </el-table-column>

                        <el-table-column
                            align="center"
                            prop="fieldDict"
                            label="操作"
                            fixed="right"
                            min-width="100">
                            <template v-slot="{$index}">
                                <el-button type="danger" icon="el-icon-delete" circle @click="deleteCompany($index)"></el-button>
                            </template>
                        </el-table-column>
                        <template v-slot:append>
                            <div class="flex-xy-center" style="height: 30px">
                                <el-button type="text" icon="el-icon-plus" @click="addCompany">添加担保人</el-button>
                            </div>
                        </template>
                    </el-table>
                </el-tab-pane>
            </el-tabs>

        </el-form>
    </div>
</template>

<script>
export default {
    components: {},
    props: ['guarantorsEcho', 'needGuarantor'],
    data() {
        // 这里存放数据
        return {
            form: {
                personalGuarantors: [],
                companyGuarantors: [],
            },
            activeName: '1',

        }
    },
    watch: {
        guarantorsEcho: {
            handler(val) {
                if (val && val.length > 0) {
                    let personalGuarantors = val.filter((guarantor) => guarantor.typeOfGuarantor == 1)
                    let companyGuarantors = val.filter((guarantor) => guarantor.typeOfGuarantor == 2)
                    if (personalGuarantors && personalGuarantors.length > 0) {
                        this.form.personalGuarantors = personalGuarantors
                    }
                    if (companyGuarantors && companyGuarantors.length > 0) {
                        this.form.companyGuarantors = companyGuarantors
                    }
                }
            }
        }
    },

    // 方法集合
    methods: {
        addPersonal() {
            const obj = {
                typeOfGuarantor: 1,
                name: null,
                idNumber: null,
                contacts: null,
                contactPhoneNumber: null,
                contactAddress: null,
                relationshipWithCustomers: null
            }
            if (this.form.personalGuarantors == null) {
                this.form.personalGuarantors = []
            }
            this.form.personalGuarantors.push(obj)
        },
        deletePersonal(index) {
            this.form.personalGuarantors.splice(index, 1)
        },
        addCompany() {
            const obj = {
                typeOfGuarantor: 2,
                name: null,
                idNumber: null,
                contacts: null,
                contactPhoneNumber: null,
                contactAddress: null,
                relationshipWithCustomers: null
            }
            if (this.form.companyGuarantors == null) {
                this.form.companyGuarantors = []
            }
            this.form.companyGuarantors.push(obj)
        },
        deleteCompany(index) {
            this.form.companyGuarantors.splice(index, 1)
        },
        validData(rule, value, callback) {
            if (rule.required && !value) {
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },
        saveForm() {
            let flag = false
            let resultGuarantors = [...this.form.personalGuarantors, ...this.form.companyGuarantors]
            if (this.needGuarantor == 1) {

                if (resultGuarantors && resultGuarantors.length > 0) {
                    this.$refs['guarantorsForm'].validate((valid) => {
                        if (valid) {
                            flag = true
                        }else {
                          if(this.activeName==2&&this.form.personalGuarantors?.length>0){
                            this.$message.error('您添加了个人担保信息,请完善信息, 如不需要请删除')
                          }else if(this.activeName==1&&this.form.companyGuarantors?.length>0){
                            this.$message.error('您添加了企业担保信息,请完善信息, 如不需要请删除')
                          }
                        }
                    })
                } else {
                    this.$message.error('请至少添加一条担保人信息')
                }
            } else {
                flag = true
            }

            if (flag) {
                return resultGuarantors
            }else {
              return null
            }
        }
    },
    // 生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {

    },

}
</script>

<style lang="scss" scoped>
</style>
